<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-03-15 10:40:28
-->
<template>
  <uv-tabbar
    :value="value"
    @change="onChange"
    :border="false"
    activeColor="#236FFF"
    inactiveColor="#ACB8D5"
    :customStyle="{
      background: '#fff',
      'box-shadow': '0rpx 2rpx 20rpx 0rpx rgb(0 0 0 / 12%)',
    }"
  >
    <uv-tabbar-item v-for="(item, i) in menu" :key="item.text" :text="item.text">
      <template v-slot:active-icon>
        <uv-image
          width="40rpx"
          height="40rpx"
          duration="450"
          :fade="true"
          :src="item.img_active"
        ></uv-image>
      </template>
      <template v-slot:inactive-icon>
        <uv-image
          width="40rpx"
          height="40rpx"
          duration="450"
          :fade="true"
          :src="item.img"
        ></uv-image>
      </template>
    </uv-tabbar-item>
  </uv-tabbar>
</template>

<script setup>
// 基于小程序的 Page 类型扩展 uni-app 的 Page
const value = ref(0)
import home from '@/static/images/menus/home.png'
import homeActive from '@/static/images/menus/home_active.png'
import gj from '@/static/images/menus/gj.png'
import gjActive from '@/static/images/menus/gj_active.png'
import sb from '@/static/images/menus/sb.png'
import sbActive from '@/static/images/menus/sb_active.png'
import my from '@/static/images/menus/my.png'
import myActive from '@/static/images/menus/my_active.png'
const menu = ref([
  {
    text: '首页',
    img: home,
    img_active: homeActive,
    url: 'pages/index/index',
  },
  {
    text: '设备列表',
    img: sb,
    img_active: sbActive,
    url: 'pages/device/list',
  },
  {
    text: '告警',
    img: gj,
    img_active: gjActive,
    url: 'pages/alarm/list',
  },
  {
    text: '我的',
    img: my,
    img_active: myActive,
    url: 'pages/login/index',
  },
])
const onChange = (index) => {
  value.value = index
  uni.redirectTo({
    url: '/' + menu.value[index].url,
  })
}
onShow((e) => {
  const pageInstance = getCurrentPages().at(-1)
  menu.value.forEach((item, index) => {
    item.url === pageInstance.route && (value.value = index)
  })
})
</script>

<style lang="scss" scoped></style>
